

<html>
      <head>  
       <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
   <link type="text/css" rel="stylesheet" href="/stylesheets/main_2.css" />
   <title> Handelsfurste Labs</title>
            <script type="text/javascript">
              var oldDx = 300;
              var oldDy = 300;
              var lastDx = 300;
              var lastDy = 300;
              var clickedCanvas = false;
              function draw(dx,dy){
                lastDx = dx;
                lastDy = dy;
                var canvas = document.getElementById('tutorial');  
                if (canvas.getContext){  
  
                  var ctx = canvas.getContext('2d');  
                  ctx.fillStyle = "rgb(155,155,255)";  
                  ctx.fillRect (0, 0, 600, 600);
                  
                  ctx.strokeStyle = "rgb(0,0,155)";  
                  ctx.beginPath();  
                  ctx.moveTo(dx,0);  
                  ctx.lineTo(dx,400);
                  ctx.stroke();
                  ctx.moveTo(0,dy);  
                  ctx.lineTo(400,dy);  
                  ctx.stroke();
                  
                  {{drawNodes|safe}}

                }  
              }
              function clickedMap() {
              	clickedCanvas = true;              
              }
              
              document.onmousemove = mouseMove; 
2	 
		      function mouseMove(ev){
		        if (clicked) {
				  ev           = ev || window.event; 
				  var mousePos = mouseCoords(ev);
				  draw(oldDx+mousePos.x-mouseZeroX, oldDy+mousePos.y-mouseZeroY)
				}
		      } 
				 
		      function mouseCoords(ev){ 
			    if(ev.pageX || ev.pageY){ 
			        return {x:ev.pageX, y:ev.pageY}; 
			    } 
			    return { 
			      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
		          y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
			    }; 
			  }
			  
			  document.onmousedown = mouseDown; 
        	  var clicked = false;
        	  var mouseZeroX = 0;
        	  var mouseZeroY = 0;
	          function mouseDown(ev){
	            if (clickedCanvas) {
	              clicked = true;
	              ev = ev || window.event; 
				  var mouseTemp = mouseCoords(ev);
				  mouseZeroX = mouseTemp.x;
				  mouseZeroY = mouseTemp.y;
				}
	          }
	          document.onmouseup = mouseUp; 
	          function mouseUp(ev){
	            clickedCanvas = false;
	            clicked = false;
	            oldDx = lastDx;
	            oldDy = lastDy;
	          }  
              
            </script>  
            <style type="text/css">  
              canvas { border: 1px solid black; }  
            </style>  
          </head> 

  <body onload="draw(200,200)">
    <div id='header'>
        <b> Handelsfurste Labs</b>
      </div>
    <div id="main">
    <div id="main_2">
      <div id="sidebar">
      {% for no in noOfFarms %}
	    {{no}} <br>
	  {% endfor %}
	    Courts: {{numberOfTwos}} <br>
	    Andra: {{numberOfOthers}}
	  </div>
	  <div id="bodycopy">
	    <b>Byggnader</b><br>
	           
        <canvas id="tutorial" width="600" height="600" onMouseDown="clickedMap()"></canvas>
      </div>
    </div>
      </div>
  </body>
</html>